<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机绑定页面</title>
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
        button{
            border: none;
            outline: none;
            background-color: white;
        }




        .total {
            width: 35rem;
            height: 40rem;
            margin: auto;
            margin-top: 8rem;
            /* border: 0.1rem solid #4543CB; */
        }

        .title {
            font-size: 3rem;
            width: 100%;
            height: 5rem;
            text-align: center;
            line-height: 5rem;
            margin-top: 2rem;
        }

        .div1 {
            width: 90%;
            height: 6rem;
            line-height: 6rem;
            margin-top: 2rem;
            margin-left: 4%;
            border-bottom: 0.05rem solid #4543CB;
            padding-left: 2rem;
        }

        .input1 {
            width: 60%;
            height: 2rem;
            border: none;
            font-size: 1.6rem;
            outline: none;
            vertical-align: middle;
        }

        .div2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .getNum {
            width: 35%;
            height: 3rem;
            line-height: 3rem;
            border-left: 0.1rem solid #4543CB;
            padding-left: 1rem;
            font-size: 1.6rem;
        }

        .div3 {
            width: 95%;
            padding: 0;
            margin-top: 5rem;
            background-color: #4543CB;
            border-radius: 1.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.6rem;
            color: white;

        }

        .model1 {
            width: 90%;
            height: 20rem;
            background-color: white;
            position: absolute;
            left: 5%;
            top: 20rem;
        }

        .btn1 {
            position: absolute;
            bottom: 10%;
            right: 10%;
        }

        .text {
            width: 80%;
            height: 10rem;
            background-color: wheat;
        }
    </style>
</head>

<body>
    <div class="back">
        <div class="total">
            <div class="title">绑定手机号</div>
            <div class="div1">
                <input type="text" placeholder="请输入手机号" class="input1" id="phone" onchange="getphone()" />
            </div>
            <div class="div1 div2">
                <input type="text" placeholder="请输入验证码" class="input1" id="input2" />
                <button class="getNum" id="yzm" onclick="fn()">获取验证码</button>
            </div>
            <div class="div1 div3" id="finish">
                完成
            </div>
        </div>

    </div>


    <script src="layer/layer.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script>
        function fn(){
            var oBtn = document.getElementById("yzm")
            var time = 60;
            var timer = null;
            oBtn.innerHTML = time + 's后重发';
            oBtn.setAttribute('disabled', 'disabled');  // 禁用按钮
            timer = setInterval(function(){
                // 定时器到底了 兄弟们回家啦
                if(time == 1){
                    clearInterval(timer);
                    oBtn.innerHTML = '获取验证码';
                    oBtn.removeAttribute('disabled');
                }else{
                    time--;
                    oBtn.innerHTML = time + 's后重发';
                }
            }, 1000)
        }
        //获取本机ip地址
        var local = window.location.host;
        //获取二维码传过来的参数id
        var id = window.location.href.split("?")[1].split("=")[1];
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;

        var yzm = undefined;
        $("#yzm").click(function () {
            if(reg.test(document.getElementById("phone").value)){
                layer.msg("发送成功")
                var phone = document.getElementById('phone');
                var data = {"user_phone":phone.value}
                $.post("http://"+local+"/user/random",data,function (res) {
                    yzm=res;
                    console.log(res)
                },"json")
            }else
            {layer.msg("请输入正确的手机格式")}
        })
        function getphone() {
            var phone = document.getElementById('phone');
            var input2 = document.getElementById('input2');
            var finish = document.getElementById('finish');

            finish.onclick =function () {
            if(input2.value==yzm){
                var data = {"user_pid":id,"user_phone":phone.value}
                $(function () {
                    $.post("http://"+local+"/Invite/getInvitePhone",data,function (res) {
                        if(res.code==0){
                            // $('#myModal').modal('show');

                            //提示
                            layer.msg('请前往为微信小程序搜索小小洗衣机进行授权即可使用。', {
                                time: 3000, //20s后自动关闭
                                btn: ['知道了']
                            });
                        }
                    },"json")
                })
            }else {
                layer.msg("验证码错误，请重新输入")
            }

            }

        };

        (function () {
            function setRem() {
                //视口宽度
                var htmlClientWidth = document.documentElement.clientWidth;
                //设置比率
                var remSize = (htmlClientWidth / 375) * 10;
                if (htmlClientWidth < 375) {
                    document.documentElement.style.fontSize = '10px';
                } else {
                    //设置html的fontsize
                    document.documentElement.style.fontSize = parseInt(remSize) + 'px';
                }
            };
            setRem();
            var timer;
            window.addEventListener('resize',function ()  {
                clearInterval(timer);
                setRem();
                timer = setTimeout(setRem, 100);
            });
        })();



    </script>
</body>

</html>